<template>
  <div class="content">
    <div class="point">
      <div class="enter" v-for="item in enters" :key="item.index" @click="test2(item)" @dblclick="sentSysId(item)"></div>
      <transition
        name="custom-classes-transition"
        enter-active-class="animated bounceInLeft"
        leave-active-class="animated bounceOutRight"
      >
        <div class="chart-box" v-show="showChartBox" :style="{top: chartTop+'px',left: chartLeft+'px'}">
          <div class="p-line p-line2"></div>
          <p v-html="chartBoxHtml"></p>
          <div class="p-line"></div>
          
          <chart :options="chart" :theme="chartTheme" auto-resize></chart>
        </div>
    </transition>
    </div>
    <div class="weather">
      <p class="date">{{today.lunar.ncWeek}},{{today.lunar.cMonth}}月{{today.lunar.cDay}}日,农历{{today.lunar.monthCn}}{{today.lunar.dayCn}}</p>
      <div class="weather-now">
        <span>{{ weatherData.now }}</span><span>℃</span><span>{{ weatherData.text }}</span>
        <div class="weather-img" :style="{backgroundImage: 'url(' +weatherData.img+')'}"></div>
      </div>
      <p class="temp-rang">
        <span>{{ weatherData.temp }}</span>
        <span>{{ weatherData.wind }}</span>
      </p>
    </div>
    
    <div class="main-boxs" >
        <transition-group
        name="list-complete"
      >
        <div class="main-box list-complete-item" v-for="item in mainBoxs" :key="item.name" 
        :style="{backgroundImage: item.img}">
        {{item.name}}
      </div>
      </transition-group>
    </div>
    
  </div>
</template>

<script>
import echarts from "echarts";
import solarlunar from "solarlunar";
export default {
  name: "home",
  data() {
    return {
      enters: ["0", "1", "2", "3", "4"],
      mainBoxs: [],
      hospitalData: [
        {
          name: "海宁人民医院",
          img:
            "url(" +
            require("../../assets/main-border.png") +
            "),url(" +
            require("../../assets/home-hospital-eg1.jpg") +
            ")"
        },
        {
          name: "海宁市中心医院",
          img:
            "url(" +
            require("../../assets/main-border.png") +
            "),url(" +
            require("../../assets/home-hospital-eg2.jpg") +
            ")"
        },
        {
          name: "连云港东海医院",
          img:
            "url(" +
            require("../../assets/main-border.png") +
            "),url(" +
            require("../../assets/home-hospital-eg3.jpg") +
            ")"
        },
        {
          name: "赣榆人民医院",
          img:
            "url(" +
            require("../../assets/main-border.png") +
            "),url(" +
            require("../../assets/home-hospital-eg4.jpg") +
            ")"
        }
      ],
      governmentData: [
        {
          name: "浙江省政府",
          img:
            "url(" +
            require("../../assets/main-border.png") +
            "),url(" +
            require("../../assets/home-gov-eg1.jpg") +
            ")"
        },
        {
          name: "嘉兴市政府",
          img:
            "url(" +
            require("../../assets/main-border.png") +
            "),url(" +
            require("../../assets/home-gov-eg2.jpg") +
            ")"
        },
        {
          name: "海宁市政府",
          img:
            "url(" +
            require("../../assets/main-border.png") +
            "),url(" +
            require("../../assets/home-gov-eg3.jpg") +
            ")"
        },
        {
          name: "海盐县政府",
          img:
            "url(" +
            require("../../assets/main-border.png") +
            "),url(" +
            require("../../assets/menu-gov.jpg") +
            ")"
        }
      ],
      industryData: [
        {
          name: "海橡集团",
          img:
            "url(" +
            require("../../assets/main-border.png") +
            "),url(" +
            require("../../assets/home-comp-eg1.jpg") +
            ")"
        },
        {
          name: "海宁红狮电梯",
          img:
            "url(" +
            require("../../assets/main-border.png") +
            "),url(" +
            require("../../assets/home-comp-eg2.jpg") +
            ")"
        }
      ],
      waterData: [
        {
          name: "海宁“后一生态工程”",
          img:
            "url(" +
            require("../../assets/main-border.png") +
            "),url(" +
            require("../../assets/home-water-eg1.jpg") +
            ")"
        }
      ],
      cityKey: 101210303,
      weatherData: { now: "", text: "", temp: "", wind: "", img: "" },
      showChartBox: false,
      select: "",
      chartTop: 0,
      chartLeft: 0,
      chartBoxHtml: "",
      chartTheme: {},
      chart: {},
      chart3: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            name: "社会用电量（万千瓦时）",
            type: "value"
          },
          {
            name: "增速（%）",
            type: "value"
          }
        ],
        legend: {
          data: ["本期", "同期", "增速"]
        },
        series: [
          {
            name: "本期",
            type: "bar",
            barWidth: "20%",
            data: [10, 52, 200, 334, 390, 330, 220],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#50debe" },
                  { offset: 1, color: "#1ac6da" }
                ])
              }
            }
          },
          {
            name: "同期",
            type: "bar",
            barWidth: "20%",
            data: [10, 52, 200, 334, 390, 330, 220],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#f569cc" },
                  { offset: 1, color: "#8b33cf" }
                ])
              }
            }
          },
          {
            name: "增速",
            type: "line",
            smooth: false,
            symbolSize: 6,
            yAxisIndex: 1,
            lineStyle: {
              width: 3,
              shadowColor: "rgba(201, 025, 100, 0.5)",
              shadowOffsetY: 4,
              shadowBlur: 10
            },
            data: [2, 5.2, 5.4, 5.8, 7.0, 7.8, 8.0],
            itemStyle: {
              normal: {
                color: "#fd8d53"
              }
            }
          }
        ]
      },
      chart4: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {
              alignWithLabel: true
            },
          }
        ],
        yAxis: [
          {
            name: "cpi",
            type: "value"
          }
        ],
        series: []
      },
      chart2: {
        color: [
          "#0024e4",
          "#9d4fff",
          "#4bf7ff",
          "#acfbff",
          "#2ba0ff",
          "#0b4dff"
        ],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          show: false
        },
        series: [
          {
            name: "能耗",
            type: "pie",
            radius: ["25%", "50%"],
            center: ["50%", "65%"],
            data: [
              { value: 21346.29, name: "电-标煤(吨)" },
              { value: 0, name: "原煤-标煤(吨)" },
              { value: 5866.77, name: "天然气-标煤(吨)" },
              { value: 424.43, name: "液化石油气-标煤(吨)" },
              { value: 2.34, name: "人工煤气-标煤(吨)" },
              { value: 2916.69, name: "汽油-标煤(吨)" },
              { value: 766.09, name: "柴油-标煤(吨)" },
              { value: 730.82, name: "热力-标煤(吨)" },
              { value: 0, name: "煤油-标煤(吨)" },
              { value: 0, name: "其他能源-标煤(吨)" }
            ].sort(function(a, b) {
              return a.value - b.value;
            }),
            label: {
              normal: {
                textStyle: {
                  color: "#fff"
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: "#fff"
                },
                length: 10,
                length2: 60
              }
            }
          }
        ]
      }
    };
  },
  computed: {
    today: function() {
      let _today = {};
      let _date = new Date();
      let year = _date.getFullYear();
      let month = _date.getMonth() + 1;
      let date = _date.getDate();
      let lunar = solarlunar.solar2lunar(year, month, date);
      let day1 = new Date();
      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
      _today.lunar = lunar;
      _today.text =
        day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate();
      return _today;
    }
  },
  mounted: function() {
    this.$http("/vqdisplay/static/HospitalChartTheme.json").then(response => {
      this.chartTheme = response.data;
      console.log(this.chartTheme);
    });
    this.getWeather(this.cityKey);
  },
  methods: {
    sentSysId: function(id) {
      this.$http({
        method: "GET",
        url: "/vqdisplay/page/switch?flag=" + id
      })
        .then(function(response) {
          // console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    test2: function(item) {
      if (this.select !== item) {
        this.showChartBox = false;
        setTimeout(() => {
          this.showChartBox = true;
        }, 300);
      }
      if (item === "1") {
        this.mainBoxs = this.hospitalData;
        setTimeout(() => {
          this.chartTop = -53;
          this.chartLeft = 500;
          this.chartBoxHtml =
            "我们已为多家三甲医院提供整套能源管理解决方案，其中包括连云港东方医院、东海人民医院、温州眼视光医院、海宁人民医院、海宁中心医院等";
          this.chart = {};
        }, 300);
      } else if (item === "2") {
        this.mainBoxs = this.governmentData;
        setTimeout(() => {
          this.chartTop = 126;
          this.chartLeft = 120;
          this.chartBoxHtml =
            "我们已为<strong>1993</strong>家公共机构提供统一的能耗申报平台,其中<strong>69</strong>家纳入实时能耗监控平台";
          this.chart = this.chart2;
        }, 300);
      } else if (item === "3") {
        this.mainBoxs = this.industryData;
        setTimeout(() => {
          this.chartTop = 517;
          this.chartLeft = 416;
          this.chartBoxHtml =
            "我们已为<strong>1209</strong>规模以上企业提供统一的能源双控管理平台，其中<strong>120</strong>家纳入实时能耗监控平台";
          this.chart = this.chart3;
        }, 300);
      } else if (item === "4") {
        this.mainBoxs = this.waterData;
        setTimeout(() => {
          this.chartTop = 180;
          this.chartLeft = 956;
          this.chartBoxHtml =
            "我们已为海宁<strong>700</strong>多个农村污水处理站点提供统一的监控管理平台，涵盖<strong>14</strong>个乡镇区域，兼容7种来自不同厂家的处理工艺";
          this.chart = this.chart4;

          this.$http({
            method: "GET",
            url: "/vqdisplay/epindex/cpi"
          })
            .then(response => {
              if (response.data.success) {
                let data = response.data.body.cpi;
                this.chart4.xAxis[0].data = data.xAxis;
                data.legend.forEach((item, index) => {
                  this.chart4.series[index] = {
                    name: "综合指数",
                    type: "bar",
                    barWidth: "20%",
                    data: data.series[index][item],
                    itemStyle: {
                      normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          { offset: 0, color: "#994dff" },
                          { offset: 1, color: "#0020ed" }
                        ])
                      }
                    }
                  };
                });
              } else {
                console.log(response.data);
              }
            })
            .catch(error => {
              console.log(error);
            });
        }, 300);
      }
    },
    getWeather: function(citykey) {
      this.$http(
        "http://wthrcdn.etouch.cn/weather_mini?citykey=" + citykey
      ).then(response => {
        var _d = response.data.data;
        this.weatherData.now = _d.wendu;
        this.weatherData.text = _d.forecast[0].type;
        this.weatherData.temp =
          _d.forecast[0].low.substring(2, _d.forecast[0].low.length - 1) +
          "~" +
          _d.forecast[0].high.substring(2);
        this.weatherData.wind =
          _d.forecast[0].fengxiang +
          _d.forecast[0].fengli.substring(9, _d.forecast[0].fengli.length - 3);
        this.weatherData.img = this.getWeatherImage(_d.forecast[0].type);
      });
    },
    getWeatherImage: function(id) {
      return require("../../assets/weather/" + id + ".svg");
    },
    getEgImage: function(url) {
      return require(url);
    }
  }
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.content {
  position: absolute;
  width: 100%;
  height: 100vh;
  color: #fff;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("~@/assets/home-bg.jpg");
  display: flex;
  justify-content: center;
  align-items: center;
}
.point {
  position: relative;
  width: 1109px;
  height: 652px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("~@/assets/point.png");
}
.enter {
  position: absolute;
  border-radius: 100%;
}
.enter:nth-child(1) {
  left: 11%;
  top: 27%;
}
.enter:nth-child(2) {
  height: 154px;
  width: 154px;
  left: 48%;
  top: 23%;
}
.enter:nth-child(3) {
  left: 20%;
  top: 5%;
  height: 145px;
  width: 145px;
}
.enter:nth-child(4) {
  height: 145px;
  width: 145px;
  left: 28%;
  top: 64%;
}
.enter:nth-child(5) {
  height: 139px;
  width: 139px;
  left: 80%;
  top: 15%;
}
/*   天气样式  */

.weather {
  position: absolute;
  right: 10px;
  top: 10px;
  min-width: 250px;
  color: rgba(255, 255, 255, 0.65);
}

.weather p,
.room-info p {
  margin: 0;
}
.date {
  font-size: 14px;
}
.weather-now {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.weather-now span:first-child {
  font-weight: 100;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.85);
}
.weather-now span:nth-child(2) {
  font-weight: 100;
  font-size: 36px;
  color: rgba(255, 255, 255, 0.85);
}
.weather-now span:nth-child(3) {
  margin-left: 10px;
  font-size: 16px;
}
.temp-rang {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.weather-img {
  opacity: 0.5;
  width: 72px;
  height: 72px;
  margin-left: 20px;
  background-size: 72px 72px;
  background-repeat: no-repeat;
  background-position: center;
}
.main-boxs {
  position: absolute;
  left: 40px;
  top: 80px;
  height: 776px;
}
.main-box {
  width: 261px;
  height: 169px;
  padding: 20px;
  margin: 20px;
  background-size: 100% 100%;
  color: #fff;
  text-shadow: 0 1px 2px rgba(5, 23, 138, 0.63);
}
.chart-box {
  position: absolute;
  width: 400px;
  height: 250px;
  border: 2px solid #6da7e6;
  background-color: rgba(5, 23, 138, 0.63);
  overflow: hidden;
}
.chart-box p {
  margin: 0;
  padding: 6px 20px;
  color: #030e51;
  background-image: linear-gradient(
    to right,
    transparent,
    #3fa9dc 20%,
    #3fa9dc 80%,
    transparent
  );
  min-height: 50px;
}
.p-line {
  position: relative;
  top: -5px;
  width: 10px;
  left: 75%;
  height: 10px;
  border-radius: 5px;
  transform: rotate(-10deg) skewX(80deg);
  background-color: #9edaff;
  box-shadow: 0px 0px 2px #9edaff;
}
.p-line2 {
  position: absolute;
  top: -4px;
  left: 20%;
}
.list-complete-item {
  transition: all 1s;
  margin-right: 10px;
}
.list-complete-enter, .list-complete-leave-to
  /* .list-complete-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: scale(0.3, 0.3);
}
.list-complete-leave-active {
  position: absolute;
}
.echarts {
  height: 60%;
  width: 100%;
}
</style>